<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="true">
      <!-- 查询 -->
      <el-row :gutter="10" style="margin-bottom: 10px">
        <el-form-item label="编码" prop="code">
          <el-input v-model="queryParams.code" placeholder="编码" clearable/>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </el-row>
    </el-form>

    <!-- 数据操作 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" @click="toAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" @click="toEdit(selectedRows[0])"
                   :disabled="selectedRowKeys.length!==1">
          编辑
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-edit" @click="del(selectedRowKeys)"
                   :disabled="selectedRowKeys.length===0">
          删除
        </el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table
      :data="data"
      style="width: 100%"
      :border="border"
      :row-key="rowKey"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column
        v-for="column in columns"
        :prop="column.prop"
        :label="column.label"
        :width="column.width">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="toSee(scope.row)">查看</el-button>
          <el-button type="primary" size="mini" @click="toEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="del(Array.of(scope.row[rowKey]))">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格分页 -->
    <pagination
      v-show="pagination.total>0"
      :total="pagination.total"
      :page.sync="pagination.current"
      :limit.sync="pagination.pageSize"
      :limit="10"
      @pagination="loadData"/>

    <Dialog ref="dialog" :url="url" :rules="rules" :tabs="tabs" @ok="loadData"/>
  </div>
</template>

<script>
import FTablePage from "@/components/futureCloudMOM/page/FTablePage";
import FTable from "@/components/futureCloudMOM/table/FTable";
import {FTableMixin} from "@/minxins/table/FTableMixin";
import Dialog from "./dialog/index";
import {FTablePageMixin} from "@/minxins/page/FTablePageMixin";

export default {
  name: "index",
  components: {FTablePage, FTable, Dialog},
  mixins: [FTablePageMixin, FTableMixin],
  data() {
    return {
      url: {
        source: 'basic/process'
      },
      rowKey: 'id',
      columns: [
        {label: '编码', prop: 'code', searchParam: 'code'},
        {label: '名称', prop: 'name', searchParam: 'name'},
        {label: '标准工时', prop: 'stdTime', searchParam: 'stdTime'},
        {label: '工价', prop: 'priceOne', searchParam: 'priceOne'},
        {label: '备注', prop: 'remark', searchParam: 'remark'},
      ],
      tabs: [
        {
          name: 'actions',
          label: '工序活动',
          url: {source: 'basic/process/action'},
          forKey: 'processId',
          columns: [
            {label: '编码', prop: 'actionCode', searchParam: 'actionCode'},
            {label: '名称', prop: 'actionName', searchParam: 'actionName'},
            {label: '比重', prop: 'actionPriceOne', searchParam: 'actionPriceOne'},
          ]
        }
      ],
      rules: {}
    }
  },
  created() {
  },
  methods: {
    getColumns: function () {
    },
    search: function () {
      this.searchQuery();
    },
    reset: function () {
      this.searchReset();
    },
    toAdd: function () {
      this.toEdit({});
    },
    toEdit: function (model) {
      this.$refs.dialog.canEdit = true;
      this.$refs.dialog.show(model);
    },
    toSee: function (model) {
      this.$refs.dialog.canEdit = false;
      this.$refs.dialog.show(model);
    }
  }
}
</script>

<style scoped>

</style>
